<template>
  <el-dialog :title="title" :visible.sync="visible" :width="width" :close-on-click-modal='false' class="bonus">
    <el-row>
      <el-form :model="formData" ref="formRef" :label-width="labelWidth"   v-loading="formLoading" :close-on-click-modal="false">
        <el-form-item label="可分配金额" class="txt-bold ">
          <el-input-number  :controls="false" disabled class="green" v-model="formData.kfpje"></el-input-number>
        </el-form-item>
        <el-form-item label="剩余金额" class="txt-bold">
          <el-input-number  :controls="false" disabled class="red" v-model="formData.syje"></el-input-number>
        </el-form-item>
      </el-form>
      <el-form :model="formData" ref="formRef">
          <el-table
            :data="formData.tableData"
            class="edit-table count"
            border
            @selection-change="handleSelectionChange"
            header-align="center"
            :header-cell-style="{ background: '#f2f2f2', color: '#000' }"
            height="calc(100vh - 450px)"
            ref="tableRef"
            highlight-current-row
          >
            <el-table-column type="selection"  width="55" align="center" header-align="center">
            </el-table-column>
            <el-table-column width="55" label="序号" align="center" header-align="center">
              <template slot-scope="scope">
                <span>{{scope.$index + 1}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="bonusItemName" show-overflow-tooltip label="奖金项" align="center" header-align="center" min-width="140">
            </el-table-column>
            <el-table-column prop="bonusCount" show-overflow-tooltip label="发放金额" align="left" header-align="center" >
              <template v-slot="scope" >
                <el-form-item :prop="`tableData.${scope.$index}.bonusCount`" :rules="[{validator:$validateUtil.dynamic,prop:'bonusCount',row:scope.row,ruleType:''}]">
                  <el-input-number  :controls="false" v-model.trim="scope.row.bonusCount" placeholder="请输入" class="w100"  @change="changBonusCount(scope.row.bonusCount)"></el-input-number>
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>
        </el-form>

    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel(false)">取消</el-button>
      <el-button type="primary"  @click="handleSubmit">确定</el-button>
    </div>


  </el-dialog>
</template>

<script>
import {  saveBonusCount} from '@/api/bonus/calculateuserprogramme'
export default {
  name: "addForm",
  components:{
  },
  props:{

  },
  watch:{
    formData:{
      handler(newV,oldV){
        let  values = []
        this.formData.tableData.map(item=>{
          values.push(item.bonusCount)
         })
         let sum = 0 ;
          if (!values.every(value => isNaN(value))) {
            sum = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
          } else {
            sum = 'N/A';
          }
          this.formData.syje = this.formData.kfpje - sum ;

      },
      immediate:true,
      deep:true
    }
  },
  data(){
    return{
      type:'add',
      formLoading:false,
      title:'子奖金项金额分配',
      width:'30%',
      visible: false,
      labelWidth:'125px',
      formData: {tableData:[]},
      chooseList:[],
    }
  },
  methods:{
    init(type,data){
      this.type = type
      this.parentData = data ;
      this.formData = {'kfpje':this.parentData.bonusCount,'syje':this.parentData.bonusCount,tableData: []}
      if (type == 'edit'){

      }else{
        this.$set(this.formData,'tableData',this.parentData.children )
      }
      this.visible = true ;
    },
    handleSubmit(){
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.formLoading = true ;
          saveBonusCount(this.formData.tableData).then(res=>{
              this.formLoading = false ;
              if (res.data.code == 0){
                this.$message.success('保存成功')
                this.handleCancel(true) ;
              }
            }).catch(()=>{
              this.formLoading = false ;
            })
        } else {
          return false;
        }
      });
    },
    handleCancel(refresh){
      this.visible = false ;
      this.formData = {'kfpje':'','syje':'',tableData: []}
      if (refresh){
        this.$emit('refresh')
      }
    },
    handleSelectionChange(list){
      this.chooseList = list;
    },
    //批量修改系数
    changBonusCount(val){
      this.chooseList.forEach(ele=>{
        ele.bonusCount = val;
      })
    },
  }
}
</script>

<style scoped>

</style>
